<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="js/bootstrap/2.3.1/css_default/bootstrap.min.css" />
		<link rel="stylesheet" href="css/icon-full.css" />
		<link rel="stylesheet" href="css/order.css" />
	</head>

	<body>
		<!-- 内容框 -->
		<div class="content-panel">
			<div class="border-tb height-full">
				<div class="order-panel height-full">
					<div class="grid-row height-full">
						<div class="grid-col-3 background-grey height-full">
							<img src="img/icon.png" class="margin-top-20" />
							<ul class="ul-style-none">
								<li class="grid-row active">
									<div class="grid-col-4">
										<div class="text-center pull-left font-size-12 day"><span name="weekDay">周一</span><br><span name="date">4月18日</span></div>
									</div>
									<div class="grid-col-8 menu font-size-12"><span name="time">10:00</span>&nbsp;&nbsp;&nbsp;&nbsp;<span name="name">酷家乐午餐</span></div>
								</li>
								<li class="grid-row">
									<div class="grid-col-4">
										<div class="text-center pull-left font-size-12 day"><span name="weekDay">周二</span><br><span name="date">4月19日</span></div>
									</div>
									<div class="grid-col-8 menu font-size-12"><span name="time">11:00</span>&nbsp;&nbsp;&nbsp;&nbsp;<span name="name">酷家乐午餐</span></div>
								</li>
								<li class="grid-row">
									<div class="grid-col-4">
										<div class="text-center pull-left font-size-12 day"><span name="weekDay">周三</span><br><span name="date">4月20日</span></div>
									</div>
									<div class="grid-col-8 menu font-size-12"><span name="time">10:00</span>&nbsp;&nbsp;&nbsp;&nbsp;<span name="name">酷家乐午餐</span></div>
								</li>
								<li class="grid-row">
									<div class="grid-col-4">
										<div class="text-center pull-left font-size-12 day"><span name="weekDay">周四</span><br><span name="date">4月21日</span></div>
									</div>
									<div class="grid-col-8 menu font-size-12"><span name="time">10:00</span>&nbsp;&nbsp;&nbsp;&nbsp;<span name="name">酷家乐午餐</span></div>
								</li>
								<li class="grid-row">
									<div class="grid-col-4">
										<div class="text-center pull-left font-size-12 day"><span name="weekDay">周五</span><br><span name="date">4月22日</span></div>
									</div>
									<div class="grid-col-8 menu font-size-12"><span name="time">10:00</span>&nbsp;&nbsp;&nbsp;&nbsp;<span name="name">酷家乐午餐</span></div>
								</li>
							</ul>
						</div>
						<div class="grid-col-3 height-full border-r">
							<p class="font-size-12 margin-top-5 margin-bottom-20 color-mark" id="dateTime">4月18日/周一&nbsp;&nbsp;酷家乐午餐</p>
							<div class="font-size-18 font-family-heiti height-24">订餐截止时间
								<div class="time-control"><span class="time" id="hour">10</span><span>:</span><span class="time" id="minute">00</span></div>
							</div>
							<ul class="nav nav-list margin-top-10 custom">
								<li class="nav-item"><a class="native-right">当日订单</a></li>
								<li class="nav-item"><a class="native-right">馋嘴猫</a></li>

								<li class="nav-item"><a class=" fold" data-toggle="collapse" data-target="#fold1">私厨</a>
									<div id="fold1" class="collapse in">
										<ul class="nav nav-list custom in-ul">
											<li class="nav-item"><a class="native-right">123</a></li>
											<li class="nav-item"><a class="native-right">232</a></li>
											<li class="nav-item"><a class="native-right">123</a></li>
											<li class="nav-item"><a class="native-right">232</a></li>
											<li class="nav-item"><a class="native-right">123</a></li>
											<li class="nav-item"><a class="native-right">232</a></li>
											<li class="nav-item"><a class="native-right">123</a></li>
											<li class="nav-item"><a class="native-right">232</a></li>
											<li class="nav-item"><a class="native-right">123</a></li>
											<li class="nav-item"><a class="native-right">232</a></li>
										</ul>
									</div>
								</li>
								<li class="nav-item active"><a class="native-right" data-toggle="collapse" data-target="#fold2">西园记</a>
									<div id="fold2" class="collapse in">
123232
									</div>
								</li>
							</ul>

						</div>
						<div class="grid-col-6 height-full border-r" style="position: relative;" id="content">
							<div class="border-b order-header" id="order-header">
								<span class="order-title font-size-12" id="conten-title">西园记</span>
								<div class="order-person">
									<a class="dropdown-toggle font-size-12 color-mark">
										<div class="img-port"><img src="img/header.png" /></div>杰少</a>
									<ul class="dropdown-menu font-family-heiti" role="menu" aria-labelledby="dLabel">
										<li class="drop-item" role="presentation"><a role="menuitem">个人订单</a></li>
										<li class="drop-item" role="presentation"><a role="menuitem">个人资料</a></li>
										<li class="drop-item" role="presentation"><a role="menuitem">退出</a></li>
									</ul>
								</div>
								<!-- 店铺选项页 -->
								<div class="order-tabs hidden" id="shop-tabs">
									<ul class="nav nav-tabs custom">
										<li class="active"><a href="#story" data-toggle="tab">私厨故事</a></li>
										<li><a href="#menu" data-toggle="tab">私厨菜单</a></li>
									</ul>
								</div>
							</div>
							<div class="main-content">
								<!-- 订单数据为空时
                                -->
								<div class="data-empty hidden" id="order-empty">
									<div class="color-mark empty-tip">当前暂无订单</div>
								</div>
								<!-- 有订单数据时 -->
								<div class="data-order hidden" id="order">
									<ul class="order-complate-menu border-b">
										<li class="grid-row">
											<div class="grid-col-8">
												<div class="text-left pull-left font-size-14"><span>红烧排骨饭</span></div>
											</div>
											<div class="grid-col-2">1份</div>
											<div class="grid-col-2 font-size-14">20.0</div>
										</li>
									</ul>
									<div class="border-b" style="padding: 10px 15px 5px 0;">
										<div class="grid-row">
											<div class="text-left grid-col-10">总价</div>
											<div class="grid-col-2">20.0</div>
										</div>
										<div class="grid-row">
											<div class="text-left grid-col-10">已支付</div>
											<div class="grid-col-2">20.0</div>
										</div>
									</div>
									<div class="border-b" style="padding: 10px 15px 5px 0;">
										<div class="grid-row">
											<div class="grid-col-12 text-left">
												取餐时，您可以从
												<a id="food-point">&lt;取餐地点&gt;</a>领取您的餐点。
											</div>
										</div>
									</div>
									<div class="border-b" style="padding: 10px 15px 5px 0;">
										<div class="grid-row">
											<div class="grid-col-3 text-left" style="line-height: 30px;">
												下单时间
											</div>
											<div class="grid-col-6 text-left">
												<div class="btn-disabled-style">04-18 8:20:03</div>
											</div>
											<div class="grid-col-3 text-left">
												<div class="btn-main">已支付</div>
											</div>
										</div>
									</div>
								</div>
								<!-- 修改订单数据  -->
								<div class="order-info hidden" id="order-edit">
									<ul class="order-menu">
										<li><span class="item-name">笋干排骨饭</span>￥<span class="price">20</span>
											<div class="number-box">
												<button class="number-box-reduce" disabled>-</button>
												<input class="number-box-input" type="number" value="1" readonly>
												<button class="number-box-add">+</button>
												<i class="ui-icon ui-icon- color-orange"></i>
											</div>
										</li>
									</ul>
									<div class="get-food-point-title">
										取餐点》
									</div>
									<ul class="get-food-point-list">
										<li class="grid-row">
											<div class="grid-col-4">
												<div class="text-left pull-left font-size-14 name">取餐点1</div>
											</div>
											<div class="grid-col-6 split">......................................................</div>
											<div class="grid-col-2 ui-icon ui-icon-success-block color-unchecked text-right"></div>
										</li>
										<li class="grid-row">
											<div class="grid-col-4">
												<div class="text-left pull-left font-size-14 name">取餐点2</div>
											</div>
											<div class="grid-col-6 split">......................................................</div>
											<div class="grid-col-2 ui-icon ui-icon-success-block color-unchecked color-checked text-right"></div>
										</li>
									</ul>
									<div class="btn-close">
										<i class="ui-icon ui-icon-close-progress color-close"></i>
									</div>
								</div>
								<!-- 店铺信息 -->
								<div class="tab-content hidden" id="shop-content">
									<div class="tab-pane custom active" id="story">
										<div class="shop-header">
											<div>
												<div class="img-shop-port"><img src="img/icon_port.png" /></div>
												<h4>老百姓</h4>
												<div class="auth-success">认证私厨</div>
												<div class="shop-special">擅长：苏州菜</div>
											</div>
										</div>
										<div>
											<h5 class="shop-title">我的故事</h5>
											<div class="shop-descript">从照顾女儿到照顾外甥，我想为像女儿一样的为工作忙碌的你做好每一顿工作餐，这就是我的快乐。</div>
										</div>
										<div>
											<h5 class="shop-title">我的认证</h5>
											<div>
												<ul class="shop-auth-photo">
													<li><img src="img/img_idcard.png" />
														<p>身份证</p>
													</li>
													<li><img src="img/img_healtcard.png" />
														<p>健康证</p>
													</li>
												</ul>
											</div>
										</div>
										<div>
											<h5 class="shop-title">我的厨房</h5>
											<div id="myCarousel" class="carousel slide">
												<ol class="carousel-indicators">
													<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
													<li data-target="#myCarousel" data-slide-to="1"></li>
													<li data-target="#myCarousel" data-slide-to="2"></li>
												</ol>
												<!-- Carousel items -->
												<div class="carousel-inner">
													<div class="active item"><img src="img/img_show.png"></div>
													<div class="item"><img src="img/img_show.png"></div>
													<div class="item"><img src="img/img_show.png"></div>
												</div>
											</div>
										</div>
									</div>
									<div class="tab-pane custom" id="menu">
										<div>
											<ul class="shop-menu">
												<li class="grid-row">
													<div class="grid-col-5">
														<div class="text-left pull-left font-size-14"><span>红烧排骨饭</span><br><span class="color-mark">配主食&蔬菜&炖蛋</span></div>
													</div>
													<div class="grid-col-5 split">......................................................</div>
													<div class="grid-col-2 menu font-size-14 price">20.0</div>
													<div class="btn-reduce">—</div>
													<div class="btn-add">1</div>
												</li>
												<li class="grid-row">
													<div class="grid-col-5">
														<div class="text-left pull-left font-size-14"><span>红烧排骨饭</span><br><span class="color-mark">配主食&蔬菜&炖蛋</span></div>
													</div>
													<div class="grid-col-5 split">......................................................</div>
													<div class="grid-col-2 menu font-size-14 price">20.0</div>
													<div class="btn-reduce">—</div>
													<div class="btn-add">1</div>
												</li>
												<li class="grid-row">
													<div class="grid-col-5">
														<div class="text-left pull-left font-size-14"><span>红烧排骨饭</span><br><span class="color-mark">配主食&蔬菜&炖蛋</span></div>
													</div>
													<div class="grid-col-5 split">......................................................</div>
													<div class="grid-col-2 menu font-size-14 price">20.0</div>
													<div class="btn-reduce">—</div>
													<div class="btn-add">1</div>
												</li>
											</ul>
										</div>
									</div>
								</div>
							</div>
							<div class="order-bottom border-t hidden" id="shop-order">
								<div class="order-food"><img src="img/icon_food.png" />X<input id="order-num" type="number" value="1" readonly></input>
								</div>
								￥<span id="total-amount">20</span>
								<div class="btn-order" id="btn-order">下单</div>
							</div>
							<div class="order-bottom border-t hidden" id="order-delete">
								<div class="order-food"><img src="img/icon_time.png" /><span>餐点预计在4月18日11:30送达</span></input>
								</div>
								<div class="btn-order" id="btn-delete">删除订单</div>
							</div>
							<div class="order-bottom-delete border-t hidden" id="delete-confirm">
								<h4>提示</h4>
								<p>确定要删除订单吗？</p>
								<div class="btn-custom btn-outline-orange" id="btn-ok">确定</div>
								<div class="btn-custom btn-orange" id="btn-cancel">取消</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="mark hidden"></div>
	</body>
	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
	<script src="js/bootstrap/2.3.1/js/bootstrap.js"></script>
	<script src="js/bootstrap/2.3.1/docs/assets/js/bootstrap-dropdown.js"></script>
	<script>
		if ($('.nav-item a').html() == '当前订单') {
			showOrder(true);
		} else {
			showShopInfo();
		}
		$('#shop-tabs a').bind('click',function(e){
			e.stopPropagation();
			$(this).tab('show');
			autoSetWidth();
		})
		$('.ul-style-none li').bind('click', function(e) {
			$('.ul-style-none li').removeClass('active');
			this.classList.add('active');
			var dateTime = this.querySelector('[name=date]').innerHTML + '/' + this.querySelector('[name=weekDay]').innerHTML + '&nbsp;&nbsp;' + this.querySelector('[name=name]').innerHTML;
			document.getElementById('dateTime').innerHTML = dateTime;
			var time = this.querySelector('[name=time]').innerHTML;
			time = time.split(':');
			document.getElementById('hour').innerHTML = time[0];
			document.getElementById('minute').innerHTML = time[1];
		})
		$('.nav-item').bind('click', function(e) {
			$('.nav-item').removeClass('active');
			this.classList.add('active');
			document.getElementById('conten-title').innerHTML = this.querySelector('a').innerHTML;
			if (this.querySelector('a').innerHTML == '当日订单') {
				showOrder(true);
			} else {
				showShopInfo();
			}
		})
		$('.order-person').bind('mouseenter', function(e) {
			$('.dropdown-toggle').dropdown('toggle');
		})
		$('.btn-reduce').bind('click', function(e) {
			var divNum = this.parentElement.querySelector('.btn-add');
			var num = divNum.innerHTML;
			num = parseInt(num);
			if (num == 1) {
				this.parentElement.classList.remove('active');
			} else {
				divNum.innerHTML = --num;
			}
			setBottomValue($('.shop-menu'));
			e.stopPropagation();
			e.cancelBubble = true;
		})
		$('.btn-add').bind('click', function(e) {
			var now = this.innerHTML;
			now = parseInt(now)
			this.innerHTML = ++now;
			setBottomValue($('.shop-menu'));
			e.stopPropagation();
			e.cancelBubble = true;
		})
		$('.shop-menu li').bind('click', function(e) {
			if (!this.classList.contains('active')) {
				this.classList.add('active');
				setBottomValue($('.shop-menu'));
			}
		})
		$('#btn-delete').bind('click', function(e) {
			$('.mark').removeClass('hidden');
			$('.order-bottom-delete').removeClass('hidden');
		})
		$('#btn-cancel').bind('click', function(e) {
			$('.mark').addClass('hidden');
			$('.order-bottom-delete').addClass('hidden');
		})
		$('#btn-ok').bind('click', function(e) {
			$('.mark').addClass('hidden');
			$('.order-bottom-delete').addClass('hidden');
			showOrder();
		})
		$('#food-point').bind('click', function(e) {
			hideOrder();
			showOrderEdit();
		});
		$('.get-food-point-list li').bind('click', function(e) {
			$('.get-food-point-list li .ui-icon-success-block').removeClass('color-checked');
			this.querySelector('.ui-icon-success-block').classList.add('color-checked');
		})
		$('.number-box-reduce').bind('click', function(e) {
			var eNum = this.parentElement.querySelector('.number-box-input');
			var num = eNum.value;
			eNum.value = --num;
			if (num == 1) {
				this.disabled = true;
			}
			setBottomValue($('.order-menu'), true);
		})
		$('.number-box-add').bind('click', function(e) {
			var eNum = this.parentElement.querySelector('.number-box-input');
			var num = eNum.value;
			eNum.value = ++num;
			if (num > 1) {
				this.parentElement.querySelector('.number-box-reduce').disabled = false;
			}
			setBottomValue($('.order-menu'), true);
		})

		function setBottomValue($menu, isEdit) {
			var items = $menu.find('li.active');
			var numElementId = '.btn-add';
			var numValue = 'innerHTML';
			if (isEdit) {
				items = $menu.find('li');
				numElementId = '.number-box-input';
				numValue = 'value';
			}
			if (items && items.length) {
				$('#shop-order').removeClass('hidden');
				if (!isEdit) $('.main-content').addClass('order');
				var total = 0.0,
					totalNum = 0;
				for (var i = 0; i < items.length; i++) {
					var price = items[i].querySelector('.price').innerHTML;
					var num = items[i].querySelector(numElementId)[numValue];
					total += parseFloat(price) * num;
					totalNum += parseInt(num);
				}
				document.getElementById('total-amount').innerHTML = total.toFixed(1);
				document.getElementById('order-num').value = totalNum;
			} else {
				$('#shop-order').addClass('hidden');
				$('.main-content').removeClass('order');
			}
		}

		function showElement(id) {
			var ele = document.getElementById(id);
			if (ele.classList.contains('hidden')) {
				ele.classList.remove('hidden');
			}
		}

		function hideElement(id) {
			var ele = document.getElementById(id);
			if (!ele.classList.contains('hidden')) {
				ele.classList.add('hidden');
			}
		}

		function showOrder(data) {
			$('.main-content').removeClass('order');
			hideShopInfo();
			hideOrderEdit();
			// 数据为空时
			if (!data) {
				hideElement('order');
				hideElement('order-delete');
				showElement('order-empty');
				return;
			} else {
				hideElement('order-empty');
				showElement('order-delete');
				showElement('order');
			}
		}

		function hideOrder() {
			hideElement('order');
			hideElement('order-delete');
			hideElement('order-empty');
		}

		function showShopInfo() {
			$('.main-content').removeClass('order');
			hideOrder();
			hideOrderEdit();
			showElement('shop-tabs');
			showElement('shop-content');
			autoSetWidth();
		}

		function hideShopInfo() {
			hideElement('shop-tabs');
			hideElement('shop-content');
		}

		function showOrderEdit() {
			$('.main-content').removeClass('order');
			showElement('order-edit');
			showElement('shop-order');
			hideElement('order-header');
			document.querySelector('.main-content').classList.add('edit');
			document.getElementById('shop-order').classList.remove('border-t');
			document.getElementById('shop-order').classList.add('border-b');
		}

		function hideOrderEdit() {
			hideElement('order-edit');
			hideElement('shop-order');
			showElement('order-header');
			document.querySelector('.main-content').classList.remove('edit');
			document.getElementById('shop-order').classList.add('border-t');
			document.getElementById('shop-order').classList.remove('border-b');
		}

		function autoSetWidth() {
			var specialWidth = $('.shop-special').width();
			var nameWidth = $('.shop-header h4').width() + $('.auth-success').outerWidth(true);
			var width;
			if (nameWidth < specialWidth) {
				width = specialWidth;
			} else {
				width = nameWidth;
			}
			$('.shop-header').css('width', width + 60 + 'px');
		}
	</script>

</html>
